import React, { Component } from 'react';
import { ScrollView, Alert } from 'react-native';
import {
  Colors,
  Typography,
  View,
  Text,
  Button,
  FeatureHighlight,
} from 'react-native-ui-lib';
import { TestCase, TestSuite } from '@rnoh/testerino';

class HighlightExample extends Component<{
  title: string;
  children?: any;
  highlightProps: any;
}> {
  state = {
    showHighlight: false,
  };
  targetRef: any = null;

  showHighlight = () => {
    this.setState({ showHighlight: true });
  };

  hideHighlight = () => {
    this.setState({ showHighlight: false });
  };

  render() {
    const { title, children, highlightProps } = this.props;
    const { showHighlight } = this.state;

    const mergedConfirmButtonProps = highlightProps.confirmButtonProps
      ? {
          ...highlightProps.confirmButtonProps,
          onPress: () => {
            if (highlightProps.confirmButtonProps.onPress) {
              highlightProps.confirmButtonProps.onPress();
            }
            // 然后关闭高亮
            this.hideHighlight();
          },
        }
      : {
          label: '知道了',
          onPress: this.hideHighlight,
        };

    return (
      <View>
        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
          <View style={{ width: 600 }} padding-20>
            <Text text70 marginB-10>
              {title}
            </Text>
            <View row centerV>
              <View
                ref={r => (this.targetRef = r)}
                bg-blue30
                padding-15
                br10
                marginR-20
                style={{ opacity: 1 }}>
                <Text white text70>
                  目标元素
                </Text>
              </View>
              <Button
                label="显示高亮"
                size={Button.sizes.small}
                onPress={this.showHighlight}
              />
            </View>
            {children}
          </View>
        </ScrollView>
        <FeatureHighlight
          visible={showHighlight}
          title="功能高亮"
          message="这是一个功能高亮示例"
          getTarget={() => this.targetRef}
          {...highlightProps}
          confirmButtonProps={mergedConfirmButtonProps}
        />
      </View>
    );
  }
}

export default class FeatureHighlightScreen extends Component<
  {},
  {
    showFrame1?: boolean;
    showMinSize?: boolean;
    showPageControl?: boolean;
    currentPage?: number;
  }
> {
  smallTargetRef: any = null;

  state = {
    showFrame1: false,
    showMinSize: false,
    showPageControl: false,
    currentPage: 0,
  };

  render() {
    const longMessage =
      '这是一条很长的消息，用于测试消息行数限制功能。Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s.';
    const longTitle =
      '这是一个很长的标题，用于测试标题行数限制功能，看看它会如何被截断或换行显示';

    return (
      <ScrollView>
        <TestSuite name="FeatureHighlight">
          {/* 基础用法 */}
          <TestCase itShould="FeatureHighlight: 基础用法">
            <HighlightExample
              title="基础用法"
              highlightProps={{
                title: '欢迎使用',
                message: '这是一个基础的功能高亮示例',
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          {/* title */}
          <TestCase itShould="FeatureHighlight: title（短标题）">
            <HighlightExample
              title="短标题"
              highlightProps={{
                title: '新功能',
                message: '查看这个新功能',
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          <TestCase itShould="FeatureHighlight: title（长标题）">
            <HighlightExample
              title="长标题"
              highlightProps={{
                title: longTitle,
                message: '这个示例展示长标题的显示效果',
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          {/* message */}
          <TestCase itShould="FeatureHighlight: message（短消息）">
            <HighlightExample
              title="短消息"
              highlightProps={{
                title: '提示',
                message: '这是一条简短的提示消息',
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          <TestCase itShould="FeatureHighlight: message（长消息）">
            <HighlightExample
              title="长消息"
              highlightProps={{
                title: '详细说明',
                message: longMessage,
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          {/* titleNumberOfLines */}
          <TestCase itShould="FeatureHighlight: titleNumberOfLines=1">
            <HighlightExample
              title="标题限制1行"
              highlightProps={{
                title: longTitle,
                titleNumberOfLines: 1,
                message: '标题被限制为1行',
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          <TestCase itShould="FeatureHighlight: titleNumberOfLines=3">
            <HighlightExample
              title="标题限制3行"
              highlightProps={{
                title: longTitle,
                titleNumberOfLines: 3,
                message: '标题可以显示最多3行',
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          {/* messageNumberOfLines */}
          <TestCase itShould="FeatureHighlight: messageNumberOfLines=2">
            <HighlightExample
              title="消息限制2行"
              highlightProps={{
                title: '消息截断',
                message: longMessage,
                messageNumberOfLines: 2,
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          <TestCase itShould="FeatureHighlight: messageNumberOfLines=5">
            <HighlightExample
              title="消息限制3行"
              highlightProps={{
                title: '消息展开',
                message: longMessage,
                messageNumberOfLines: 3,
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          {/* textColor */}
          <TestCase itShould="FeatureHighlight: textColor（白色）">
            <HighlightExample
              title="白色文本"
              highlightProps={{
                title: '白色文本示例',
                message: '所有文本都是白色的',
                textColor: Colors.white,
              }}
            />
          </TestCase>

          <TestCase itShould="FeatureHighlight: textColor（黄色）">
            <HighlightExample
              title="黄色文本"
              highlightProps={{
                title: '黄色文本示例',
                message: '所有文本都是黄色的',
                textColor: Colors.yellow30,
              }}
            />
          </TestCase>

          {/* titleStyle */}
          <TestCase itShould="FeatureHighlight: titleStyle（粗体大字）">
            <HighlightExample
              title="自定义标题样式 - 粗体"
              highlightProps={{
                title: '粗体大标题',
                message: '标题使用自定义样式',
                textColor: Colors.purple30,
                titleStyle: {
                  ...Typography.text50,
                  fontWeight: 'bold',
                },
              }}
            />
          </TestCase>

          <TestCase itShould="FeatureHighlight: titleStyle（斜体小字）">
            <HighlightExample
              title="自定义标题样式 - 斜体"
              highlightProps={{
                title: '斜体小标题',
                message: '标题使用斜体样式',
                textColor: Colors.purple30,
                titleStyle: {
                  ...Typography.text80,
                  fontStyle: 'italic',
                },
              }}
            />
          </TestCase>

          {/* messageStyle */}
          <TestCase itShould="FeatureHighlight: messageStyle（粗体）">
            <HighlightExample
              title="自定义消息样式 - 粗体"
              highlightProps={{
                title: '消息样式',
                message: '这条消息使用粗体样式',
                textColor: Colors.purple30,
                messageStyle: {
                  ...Typography.text70,
                  fontWeight: 'bold',
                },
              }}
            />
          </TestCase>

          <TestCase itShould="FeatureHighlight: messageStyle（斜体）">
            <HighlightExample
              title="自定义消息样式 - 斜体"
              highlightProps={{
                title: '消息样式',
                message: '这条消息使用斜体样式',
                textColor: Colors.purple30,
                messageStyle: {
                  ...Typography.text80,
                  fontStyle: 'italic',
                  lineHeight: 24,
                },
              }}
            />
          </TestCase>

          {/* overlayColor */}
          <TestCase itShould="FeatureHighlight: overlayColor（半透明黑色）">
            <HighlightExample
              title="黑色遮罩"
              highlightProps={{
                title: '黑色遮罩',
                message: '使用半透明黑色遮罩',
                overlayColor: 'rgba(0, 0, 0, 0.8)',
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          <TestCase itShould="FeatureHighlight: overlayColor（半透明蓝色）">
            <HighlightExample
              title="蓝色遮罩"
              highlightProps={{
                title: '遮罩颜色',
                message: '使用半透明蓝色遮罩',
                overlayColor: 'rgba(0, 100, 200, 0.7)',
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          {/* borderColor */}
          <TestCase itShould="FeatureHighlight: borderColor（蓝色边框）">
            <HighlightExample
              title="蓝色边框"
              highlightProps={{
                title: '边框颜色',
                message: '高亮区域有蓝色边框',
                borderColor: Colors.blue30,
                borderWidth: 3,
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          <TestCase itShould="FeatureHighlight: borderColor（红色边框）">
            <HighlightExample
              title="红色边框"
              highlightProps={{
                title: '边框颜色',
                message: '高亮区域有红色边框',
                borderColor: Colors.red30,
                borderWidth: 3,
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          {/* borderWidth */}
          <TestCase itShould="FeatureHighlight: borderWidth=1（细边框）">
            <HighlightExample
              title="细边框"
              highlightProps={{
                title: '边框宽度',
                message: '高亮区域有1px细边框',
                borderColor: Colors.yellow30,
                borderWidth: 1,
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          <TestCase itShould="FeatureHighlight: borderWidth=5（粗边框）">
            <HighlightExample
              title="粗边框"
              highlightProps={{
                title: '边框宽度',
                message: '高亮区域有5px粗边框',
                borderColor: Colors.green30,
                borderWidth: 5,
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          {/* borderRadius */}
          <TestCase itShould="FeatureHighlight: borderRadius=0（无圆角）">
            <HighlightExample
              title="无圆角"
              highlightProps={{
                title: '边框圆角',
                message: '高亮区域没有圆角',
                borderRadius: 0,
                borderColor: Colors.purple30,
                borderWidth: 2,
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          <TestCase itShould="FeatureHighlight: borderRadius=20（大圆角）">
            <HighlightExample
              title="大圆角"
              highlightProps={{
                title: '边框圆角',
                message: '高亮区域有20px圆角',
                borderRadius: 20,
                borderColor: Colors.orange30,
                borderWidth: 2,
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          {/* innerPadding */}
          <TestCase itShould="FeatureHighlight: innerPadding=0（无内边距）">
            <HighlightExample
              title="无内边距"
              highlightProps={{
                title: '内边距',
                message: '高亮框架紧贴目标元素',
                innerPadding: 0,
                borderColor: Colors.cyan30,
                borderWidth: 2,
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          <TestCase itShould="FeatureHighlight: innerPadding=20（大内边距）">
            <HighlightExample
              title="大内边距"
              highlightProps={{
                title: '内边距',
                message: '高亮框架与目标元素有20px间距',
                innerPadding: 20,
                borderColor: Colors.violet30,
                borderWidth: 2,
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          {/* confirmButtonProps */}
          <TestCase itShould="FeatureHighlight: confirmButtonProps（蓝色按钮）">
            <HighlightExample
              title="自定义确认按钮 - 蓝色"
              highlightProps={{
                title: '按钮样式',
                message: '点击蓝色按钮关闭',
                confirmButtonProps: {
                  label: '明白了',
                  color: Colors.blue30,
                  onPress: () => { },
                },
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          <TestCase itShould="FeatureHighlight: confirmButtonProps（红色按钮）">
            <HighlightExample
              title="自定义确认按钮 - 红色"
              highlightProps={{
                title: '按钮样式',
                message: '点击红色按钮关闭',
                confirmButtonProps: {
                  label: '关闭',
                  color: Colors.red30,
                  labelStyle: { fontWeight: 'bold' },
                  onPress: () => { },
                },
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          {/* onBackgroundPress */}
          <TestCase itShould="FeatureHighlight: onBackgroundPress 回调">
            <HighlightExample
              title="背景点击回调"
              highlightProps={{
                title: '点击背景',
                message: '点击遮罩背景会触发回调',
                onBackgroundPress: () => {
                  console.log('背景被点击');
                  Alert.alert('提示', '您点击了背景遮罩');
                },
                textColor: Colors.purple30,
              }}
            />
          </TestCase>

          {/* highlightFrame */}
          <TestCase itShould="FeatureHighlight: highlightFrame（自定义位置）">
            <View>
              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                <View style={{ width: 600 }} padding-20>
                  <Text text70 marginB-10>
                    自定义高亮框架位置
                  </Text>
                  <Button
                    label="显示固定位置高亮"
                    size={Button.sizes.small}
                    onPress={() => this.setState({ showFrame1: true })}
                  />
                  <View marginT-10>
                    <Text text80 grey40>
                      高亮框架将出现在屏幕中央固定位置
                    </Text>
                  </View>
                </View>
              </ScrollView>
              <FeatureHighlight
                visible={this.state?.showFrame1}
                title="固定位置高亮"
                message="这个高亮框架使用固定的坐标位置"
                highlightFrame={{ x: 100, y: 200, width: 200, height: 100 }}
                confirmButtonProps={{
                  label: '知道了',
                  onPress: () => this.setState({ showFrame1: false }),
                }}
                borderColor={Colors.green30}
                borderWidth={2}
              />
            </View>
          </TestCase>

          {/* minimumRectSize */}
          <TestCase itShould="FeatureHighlight: minimumRectSize（最小尺寸）">
            <View>
              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                <View style={{ width: 600 }} padding-20>
                  <Text text70 marginB-10>
                    最小矩形尺寸
                  </Text>
                  <View row centerV>
                    <View
                      ref={r => (this.smallTargetRef = r)}
                      bg-red30
                      style={{ width: 10, height: 10, opacity: 1 }}
                      marginR-20
                    />
                    <Button
                      label="显示高亮（小目标）"
                      size={Button.sizes.small}
                      onPress={() => this.setState({ showMinSize: true })}
                    />
                  </View>
                  <Text text80 grey40 marginT-10>
                    即使目标很小，高亮区域也会保持最小尺寸
                  </Text>
                </View>
              </ScrollView>
              <FeatureHighlight
                visible={this.state?.showMinSize}
                title="最小尺寸"
                message="高亮区域被设置为最小50x50像素"
                getTarget={() => this.smallTargetRef}
                minimumRectSize={{ width: 50, height: 50 }}
                confirmButtonProps={{
                  label: '知道了',
                  onPress: () => this.setState({ showMinSize: false }),
                }}
                borderColor={Colors.orange30}
                borderWidth={2}
              />
            </View>
          </TestCase>

          {/* testID */}
          <TestCase itShould="FeatureHighlight: testID 用于测试">
            <HighlightExample
              title="测试 ID"
              highlightProps={{
                title: '测试标识',
                message: '此高亮组件有 testID 用于自动化测试',
                testID: 'feature-highlight-test-id',
              }}
            />
          </TestCase>

          {/* pageControlProps */}
          <TestCase itShould="FeatureHighlight: pageControlProps（页面控制器）">
            <View>
              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                <View style={{ width: 600 }} padding-20>
                  <Text text70 marginB-10>
                    页面控制器
                  </Text>
                  <Button
                    label="显示带页面控制的高亮"
                    size={Button.sizes.small}
                    onPress={() =>
                      this.setState({ showPageControl: true, currentPage: 0 })
                    }
                  />
                  <Text text80 grey40 marginT-10>
                    显示多页面导航指示器
                  </Text>
                </View>
              </ScrollView>
              <FeatureHighlight
                visible={this.state?.showPageControl}
                title={`页面 ${(this.state?.currentPage || 0) + 1} / 3`}
                message="使用页面控制器在多个提示间导航"
                highlightFrame={{ x: 100, y: 200, width: 150, height: 80 }}
                pageControlProps={{
                  numOfPages: 3,
                  currentPage: this.state?.currentPage || 0,
                  onPagePress: (index: number) =>
                    this.setState({ currentPage: index }),
                  color: Colors.blue30,
                  inactiveColor: Colors.grey60,
                  size: 10,
                }}
                confirmButtonProps={{
                  label: '关闭',
                  onPress: () => this.setState({ showPageControl: false }),
                }}
              />
            </View>
          </TestCase>

          {/* 复杂组合示例 */}
          <TestCase itShould="FeatureHighlight: 复杂组合示例">
            <HighlightExample
              title="复杂组合"
              highlightProps={{
                title: '完整功能展示',
                message: longMessage,
                titleNumberOfLines: 2,
                messageNumberOfLines: 3,
                textColor: Colors.yellow30,
                titleStyle: {
                  ...Typography.text60,
                  fontWeight: 'bold',
                },
                messageStyle: {
                  ...Typography.text80,
                  lineHeight: 22,
                },
                overlayColor: 'rgba(100, 0, 100, 0.75)',
                borderColor: Colors.yellow30,
                borderWidth: 3,
                borderRadius: 15,
                innerPadding: 10,
                confirmButtonProps: {
                  label: '太棒了！',
                  color: Colors.yellow30,
                  labelStyle: { fontWeight: 'bold' },
                },
                onBackgroundPress: () => console.log('背景点击'),
              }}
            />
          </TestCase>
        </TestSuite>
      </ScrollView>
    );
  }
}
